<template>
    <div class="container">
        <!-- 新闻列表 -->
        <!-- 搜索条件栏 -->
        <div class="line">
            <span class="label">请选择目录:</span>
            <div class="hierarchy">
                <Cascader :data="menuData" v-model="menu"></Cascader>
            </div>
            <div class="search-container">
                <router-link to="/pageEdit">
                    <Button type="primary" class="fr">发布新文章</Button>
                </router-link>

                <Button type="primary" icon="ios-search" class="fr" @click="Search">Search</Button>
                <Input v-model="search" class="fr" placeholder="请输入关键字" style="width: 300px"></Input>
            </div>
        </div>
        <!-- iview 表格控件，文档链接：https://www.iviewui.com/components/table -->
        <Table border :columns="columns" :data="table"></Table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                columns: [{
                        title: '文章标题',
                        key: 'news_title'
                    },
                    {
                        title: '作者',
                        key: 'news_author'
                    },
                    {
                        title: '文章简介',
                        key: 'news_describe',
                        className: 'describe'
                    },
                    {
                        title: '点击率',
                        key: 'news_hit'
                    },
                    {
                        title: '更新时间',
                        key: 'update_time'
                    },
                    {
                        title: '操作',
                        key: 'option',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                menu: [],
                table: [],
                search: '',
                menuData: []
            }
        },
        created: function () {
            let that = this
            this.$axios.get(this.$api+'/api/admin/MenuGet', {
                    headers: {
                        'Access-Control-Request-Method': 'Origin'
                    },
                    withCredentials: true
                })
                .then(function (response) {
                    that.menuData = response.data.menu

                })
        },
        methods: {
            /**
             *@function 通过设置的要求查找文章，并显示
             */
            Search: function () {
                let that = this
                let uid = that.menu.concat().pop()
                this.$axios.post(this.$api+'/api/admin/pageGet', {
                        uid: typeof (uid) == 'undefined' ? 0 : uid,
                        keyWord: that.search
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        that.table = response.data.list

                    })
                    .catch(function (response) {

                    })
            },
            /**
             *@function 在新窗口打开用户选择的文章详情页
             *@param {Int} index 用户选中的索引，需要到数据中去找他的Uid  
             */
            show: function (index) {
                window.open('http://localhost:8081/#/page/' + this.table[index].uid + '/4');
            },
            /**
             * @function 打开文章编辑页，根据用户选中的index去找Uid并生成链接 
             * @param {Int} index 用户选中的索引，需要到数据中去找他的Uid  
             */
            edit: function (index) {
                this.$router.push({
                    path: 'pageEdit',
                    query: {
                        uid: this.table[index].uid
                    }
                })
            },
            /**
             * @function 删除文章，根据用户选中的index去找Uid删除 
             * @param {Int} index 用户选中的索引，需要到数据中去找他的Uid  
             */
            remove: function (index) {
                let that = this
                this.$axios.post(this.$api+'/api/admin/pageRemove', {
                        uid: that.table[index].uid
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        if (response.data.state == 1) {
                            that.$Notice.success({
                                title: '删除成功',
                                desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                            });
                        } else {
                            that.$Notice.error({
                                title: '删除失败',
                                desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                            });
                        }
                    })
                    .catch(function (response) {
                        that.$Notice.error({
                            title: '删除失败',
                            desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                        });
                    })
            }
        }
    }
</script>
<style>
    .describe {
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
    }
</style>

<style lang="less" scoped>
    .container {
        width: 1200px;
        margin: 0 auto;
        .line {
            width: 1200px;
            margin: 10px auto 0;
            height: 50px;
            .label {
                float: left;
                line-height: 50px;
                margin-right: 10px;
            }
            .hierarchy {
                width: 200px;
                float: left;
                height: 32px;
                margin: 9px auto;
            }
            .search-container {
                float: right;
                height: 32px;
                margin: 9px auto;
                .fr {
                    float: right;
                    margin-left: 10px;
                }
            }
        }
    }
</style>